'use client'

import { useAuth, UserButton, UserProfile } from '@clerk/nextjs'
import React from 'react'
import useIsDark from '@/hooks/common/use-is-dark'
import { dark } from '@clerk/themes/dist/themes/src/themes/dark'
// import Draft from './draft'
// import Posts from './posts'
import NextIcon from '@/components/NextIcon'

const UserProfilePage = () => {
  const isDark = useIsDark()

  const auth = useAuth()

  return (
    <div className="next-user-profile pt-2">
      <UserProfile
        path="/user-profile"
        routing="path"
        appearance={{
          baseTheme: isDark ? dark : undefined
        }}
      />
    </div>
  )
}

export default UserProfilePage
